import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Row, Col, Empty, Form, Spin } from 'antd';
import PageRouter from '@/components/PageRouter/PageRouter';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import LinkTo from '@/components/LinkTo';
import { FlowIcon } from '../../components/BasicSettingForm/components';
import styles from './index.less';

const List = ({ dispatch, flowList, loading }) => {
    const user = JSON.parse(localStorage.getItem('user'));
    const { listData } = flowList;
    const listLoading = loading;
    const fetchList = () => {
        dispatch({
            type: 'flowList/fetch',
            payload: {}
        });
    };
    useEffect(() => {
        fetchList();
    }, []);
    return (
        <PageHeaderWrapper type="success">
            <PageRouter type="flowMyflow" activePath="/personal/portal/flow/list">
                <Spin spinning={listLoading}>
                    <div className={styles.list}>
                        {listData && listData.length > 0 ? (
                            listData.map(item => (
                                <Card bordered={false} title={item.categoryName} key={item.category}>
                                    <Row type="flex" align="middle" key={item.categoryName}>
                                        {item.workflowDefProcessDTOList.map(subItem => (
                                            <LinkTo
                                                key={subItem.actProcessDefinitionId}
                                                to="/personal/portal/apply"
                                                query={{
                                                    id: subItem.actProcessDefinitionId,
                                                    name: subItem.processName,
                                                    employeeCode: user.employeeCode
                                                }}
                                                alt={subItem.processName}
                                            >
                                                <Col title={subItem.processName} key={subItem.templateId}>
                                                    <FlowIcon value={subItem.iconType} />
                                                    <span className={styles.templateName}>{subItem.processName}</span>
                                                </Col>
                                            </LinkTo>
                                        ))}
                                    </Row>
                                </Card>
                            ))
                        ) : (
                            <Card bordered={false}>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                            </Card>
                        )}
                    </div>
                </Spin>
            </PageRouter>
        </PageHeaderWrapper>
    );
};

export default withRoutePage(
    connect(({ flowList, loading }) => ({
        flowList,
        loading: loading.effects['flowList/fetch']
    }))(Form.create()(List))
);
